<template>
    <div>
        <div>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="用户" name="user" />
                <el-tab-pane label="角色" name="role" />
            </el-tabs>
        </div>
        <div class="handle-box">
            <el-button @click="addClick"
                       type="primary"
            >新增</el-button
            >
        </div>
        <div class="content">
            <div class="user-content" v-if="activeName === 'user'">
                <el-table class="table-box" :data="userList" style="width: 100%">
                    <el-table-column type="index" />
                    <el-table-column prop="userName" label="name" />
                    <el-table-column prop="email" label="email" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button
                                @click="handleDeleteUser(scope.$index, scope.row)"
                                size="small"
                                type="danger"
                            >Delete</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-box">
                    <el-pagination
                        v-model:current-page="userParams.pageIndex"
                        v-model:page-size="userParams.pageSize"
                        :page-sizes="[10, 20, 30, 40]"
                        :small="true"
                        :background="false"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="userTotal"
                        @size-change="getList"
                        @current-change="getList"
                    />
                </div>
            </div>
            <div class="role-content" v-else-if="activeName === 'role'">
                <el-table class="table-box" :data="roleList" style="width: 100%">
                    <el-table-column type="index" />
                    <el-table-column prop="name" label="name" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button
                                @click="handleDeleteRole(scope.$index, scope.row)"
                                size="small"
                                type="danger"
                            >Delete</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-box">
                    <el-pagination
                        v-model:current-page="roleParams.pageIndex"
                        v-model:page-size="roleParams.pageSize"
                        :page-sizes="[10, 20, 30, 40]"
                        :small="true"
                        :background="false"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="roleTotal"
                        @size-change="getList"
                        @current-change="getList"
                    />
                </div>
            </div>
        </div>
        <AddDialog
            @handleAdd="getList"
            :organizationId="organizationId"
            :type="activeName"
            v-model:dialogVisible="addDialogVisible"
        />
    </div>
</template>

<script setup>
import { reactive, ref, watch, nextTick } from "vue";
import {
  organizationUnitsGetUsers,
  organizationUnitsGetRoles,
  organizationUnitsRemoveUserFromOrganizationUnit,
  organizationUnitsRemoveRoleFromOrganizationUnitAsync,
} from "@/api/organizationUnits";
import AddDialog from "./AddDialog.vue";
import { ElMessage, ElMessageBox } from "element-plus";

defineOptions({
  name: "UserRole",
});
const props = defineProps({
  organizationId: {
    type: String,
    default: "",
  },
});
const addDialogVisible = ref(false);
const userParams = ref({
  pageIndex: 1,
  pageSize: 10,
});
const userTotal = ref(0);
const userList = ref([]);
const roleList = ref([]);
const roleParams = ref({
  pageIndex: 1,
  pageSize: 10,
});
const roleTotal = ref(0);
const activeName = ref("user");
function handleClick() {
  nextTick(() => {
    getList();
  });
}

function addClick() {
  if(props.organizationId) {
    addDialogVisible.value = true
  }
}

async function getList() {
  if (activeName.value === "user") {
    const res = await organizationUnitsGetUsers({
      organizationUnitId: props.organizationId,
      ...userParams.value
    });
    userList.value = res?.items ?? [];
    userTotal.value = res?.totalCount ?? 0;
  } else if (activeName.value === "role") {
    const res = await organizationUnitsGetRoles({
      organizationUnitId: props.organizationId,
      ...roleParams.value
    });
    roleList.value = res?.items ?? [];
    roleTotal.value = res?.totalCount ?? 0;
  }
}

function handleDeleteUser(index, row) {
  ElMessageBox.confirm("是否删除?", "Warning", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  }).then(async () => {
    await organizationUnitsRemoveUserFromOrganizationUnit({
      organizationUnitId: props.organizationId,
      userId: row.id,
    });
    ElMessage({
      type: "success",
      message: "Delete completed",
    });
    getList();
  });
}

function handleDeleteRole(index, row) {
  ElMessageBox.confirm("是否删除?", "Warning", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  }).then(async () => {
    await organizationUnitsRemoveRoleFromOrganizationUnitAsync({
      organizationUnitId: props.organizationId,
      roleId: row.id,
    });
    ElMessage({
      type: "success",
      message: "Delete completed",
    });
    getList();
  });
}

watch(
  () => props.organizationId,
  (val) => {
    val && getList();
  }
);
</script>

<style lang="scss" scoped>
.pagination-box {
  margin-top: 15px;
}
</style>
